<template>
  <div class="flex flex-col">
    <template v-for="(item, index) in innerAttr.dataItm.list2" :key="index">
      <div class="flex items-center" v-if="handleSiteL(item.SiteL)">
        <span>{{ item.SiteL }}F</span>
        <div class="flex-1 bg-red-400 h-[1px]"></div>
      </div>
      <div class="shadow mb-4">
        <div>{{ item.Room2Show }}</div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from "vue";
  import { useRoute } from "vue-router";
  import { vrSiteRoom2 } from "@/api/vrsite";
  import crypto from "@/utils/crypto";

  const route = useRoute();

  console.log(route.params);
  console.log(route.query);
  let a = ref(123);
  console.log(a);
  interface LibItem {
    SiteL: string;
    SiteName: string;
    SiteNo: string;
    SiteRd: string;
    SiteAddr: string;
    SitePic: string;
    Room2Show: string;
  }
  interface IInnerAttr {
    dataItm: {
      list1: LibItem[];
      list2: LibItem[];
      list3: LibItem[];
    };
  }
  const innerAttr = reactive<IInnerAttr>({
    dataItm: {
      list1: [],
      list2: [],
      list3: []
    }
  });
  const listApi = () => {
    vrSiteRoom2({ a: { SublibRd: route.query.sublibrd } }).then((res: any) => {
      console.log(res);
      const {
        vr_ifa_Site_GetRoom2_list1: list1,
        vr_ifa_Site_GetRoom2_list2: list2,
        vr_ifa_Site_GetRoom2_list3: list3
      } = res;
      innerAttr.dataItm = {
        list1: crypto.decryptArray(list1),
        list2: crypto.decryptArray(list2),
        list3: crypto.decryptArray(list3)
      };
      console.log(innerAttr.dataItm);
    });
  };
  listApi();

  let iSiteL = "";

  const handleSiteL = (siteL: string) => {
    if (iSiteL != siteL) {
      iSiteL = siteL;
      return true;
    } else {
      return false;
    }
  };
</script>
<style scoped lang="scss">
  div {
    font-size: 16px;
  }
</style>
